<!DOCTYPE html><html lang="ru"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no">




<style>
body {
  max-width: 400px;
  margin: auto;
  font-family: "Roboto", sans-serif;
  text-align: center;
  background: #EEE;
}

h1 {
  margin: 3rem 1rem 2rem;
  font-size: 1.75rem;
  font-weight: 300;
}

p {
  margin: 1.385rem;
  font-size: small;
  opacity: 0.3;
}

.box, .six, .five, .four, .three, .two, .one {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 1rem;
  border-radius: 25%;
  cursor: pointer;
  transition: z-index 0ms 200ms, box-shadow 200ms ease, transform 200ms ease;
}
.box:hover, .six:hover, .five:hover, .four:hover, .three:hover, .two:hover, .one:hover {
  z-index: 1;
  transition: z-index 0ms 0ms, box-shadow 200ms ease, transform 200ms ease;
}
.box:active, .six:active, .five:active, .four:active, .three:active, .two:active, .one:active {
  transition-duration: 100ms;
}

.one {
  background: #3B5998;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(32, 40, 57, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.one:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(32, 40, 57, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.one:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(32, 40, 57, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}

.two {
  background: #F23434;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(114, 16, 16, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.two:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(114, 16, 16, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.two:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(114, 16, 16, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}

.three {
  background: #2CAAE1;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(20, 74, 98, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.three:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(20, 74, 98, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.three:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(20, 74, 98, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}

.four {
  background: #F46899;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(135, 22, 62, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.four:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(135, 22, 62, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.four:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(135, 22, 62, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}

.five {
  background: #85C53D;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(58, 84, 29, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.five:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(58, 84, 29, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.five:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(58, 84, 29, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}

.six {
  background: #F6A32B;
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0px 0.375px 2.25px 0.75px rgba(115, 74, 13, 0.425), 0px 0.375px 1.125px 0.15px rgba(0, 0, 0, 0.325);
}
.six:hover {
  transform: translateY(-15px) scale(1.1);
  box-shadow: 0px 3.75px 22.5px 7.5px rgba(115, 74, 13, 0.2), 0px 3.75px 11.25px 1.5px rgba(0, 0, 0, 0.1);
}
.six:active {
  transform: translateY(-7.5px) scale(1.05);
  box-shadow: 0px 1.875px 11.25px 3.75px rgba(115, 74, 13, 0.325), 0px 1.875px 5.625px 0.75px rgba(0, 0, 0, 0.225);
}
</style>






<style>
body {

}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  background-color: white;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: 0px;
 
}



  #sandbox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      z-index: -1;
  }



.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 1px;
  right: 30px;
  font-size: 40px;
}

@media screen and (max-height: 250px) {
  .overlay a {font-size: 10px}
  .overlay .closebtn {
  font-size: 10px;
  top: 0px;
  right: 30px;
  z-index: 5;
  }
}
</style>



<style>

.icon {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 16em;
  height: 16em;
  transform: translate(-50%,-50%);
  
}

/* Chart */

.chart { color: #12395F; }

.chart::before,
.chart::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.25em;
  height: 8.125em;
  margin: 0 0 0 -3.25em;
  transform: translate(-50%,-50%);
  background-color: currentColor;
  border-radius: 0.125em;
}

.chart::after {
  width: 8.125em;
  height: 0.25em;
  margin: 3.125em 0 0 -0.125em;
}

.chart i {
  position: absolute;
  bottom: 4.75em;
  left: 9em;
  box-sizing: border-box;
  display: block;
  width: 1.875em;
  height: 0;
  background-color: #F69D88;
  box-shadow: inset 0 0 0 0.25em currentColor;
}

.chart i:first-child {
  animation: chart1 0.999s infinite linear;
}

.chart i:nth-child(2) {
  background-color: #FFDEA3;
  animation: chart2 0.999s 0.333s infinite linear;
}

.chart i:last-child {
  background-color: #85C996;
  animation: chart3 0.999s 0.666s infinite linear;
}

@keyframes chart1 {
  0% { height: 0; }
  10% { height: 5.625em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 5.625em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

@keyframes chart2 {
  0% { height: 0; }
  10% { height: 2.375em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 2.375em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

@keyframes chart3 {
  0% { height: 0; }
  10% { height: 3.5625em; }
  70% { width: 1.875em; transform: translateX(-4.375em); }
  99% { width: 0; height: 3.5625em; transform: translateX(-4.375em); }
  99.1% { height: 0; transform: translateX(0em); }
  100% { height: 0; }
}

</style>

<!-- Shady DOM styles for custom-style --><!-- Shady DOM styles for dom-template --><!-- Shady DOM styles for dom-repeat --><!-- Shady DOM styles for array-selector --><!-- Shady DOM styles for dom-if --><!-- Shady DOM styles for google-consumer-survey --><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
<title>EMIIA.AI   — data processing and visualization</title>
  <style type="text/css">
  #sandbox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: block;
  }
  </style>

  

</head>
<body>



<div class="icon chart" style="cursor:pointer"  onclick="openNav()" alt="ЭМИИА"   title="Preorder">
  <i></i>
  <i></i>
  <i></i>
</div>




<!-- partial:index.partial.html -->
<h1>EMIIA.AI</h1>

<div class="container lightbg">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
    <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>

</div>

<p>ANALYTICS</p>
<!-- partial -->





 <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="sandbox">
  
  
<iframe  z-index="3" id="sandbox" name="sandbox" allowfullscreen="true" sandbox="allow-scripts allow-modals allow-same-origin allow-popups" src="https://www.appsheet.com/start/ddc54838-9ce9-4a28-8d70-bd82c1309aee#appName=EMIIAAI-2006435&group=%5B%5D&page=fastTable&sort=%5B%7B%22Column%22%3A%22Price%22%2C%22Order%22%3A%22Ascending%22%7D%5D&table=EMIIA.AI&view=EMIIA.AI"></iframe>



</body>


  <script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
</script>


</html>
